* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
}

@media screen and (min-width: 1024px){
    header{
        width: 1024px;
        height: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    
    .entete{
        width: 100%;
        height: 110px;
        margin: auto;
        display: flex;
        flex-direction: row;
    }
    
    .logo{
        width: 12%;
        height: 100%;
    }
    
    .publicite{
        width: 76%;
        height: 100%;
    }

    .mapublicite{
        width: 100%;
        height: 100%;
    }
    
    .armoirie{
        width: 12%;
        height: 100%;
    }
    
    .monlogo{
        width: 90%;
        height: 90%;
        margin: auto;
    }
    
    .monarmoirie{
        width: 90%;
        height: 90%;
        margin: auto;
    }
    
    main{
        width: 1024px;
        margin: auto;
        padding: 10px 0px 10px;
    }
    
    .principal{
        width: 100%;
        height: 100%;
        display: flex;
        gap: 10px 10px;
        flex-direction: row;
    }
    
    .PrincipalGauche{
        width: 25%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .motiep{
        width: 100%;
        height: 180px;
        border-radius: 5px;
        background-color: white;
        box-shadow: 1px 1px 2px 2px rgb(0, 0, 0, 0.1);
        text-align: center;
    }
    
    .imageinspecteur{
        width: 90px;
        height: 117px;
        margin: 10px;
        border-radius: 50%;
    }
    
    .monmot{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 17px;
    }
    
    .monmot a:hover{
        background-color: rgb(250, 250, 203);
        color: red;
    }
    
    .association{
        width: 100%;
        height: 190px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.1);
        background-color: white;
        text-align: center;
    }
    
    .infomugeah h3{
        padding: 0px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(250, 4, 217);
        font-weight: bold;
    }
    
    .infomugeah p{
        text-align: justify;
        margin: 10px;
        font-style: italic;
        font-size: 15px;
    }
    
    .infomugeah span{
        color: red;
        font-weight: bold;
    }
    
    .lienutile{
        width: 100%;
        height: 190px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.1);
        background-color: white;
        text-align: center;
    }
    
    .lienutile h3{
        padding: 0px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: red;
        font-weight: bold;
    }
    
    .lienutile a{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        text-decoration: none;
        font-weight: bold;
        line-height: 20px;
    }
    
    .lienutile a:hover{
        color: white;
        background-color: red;
    }
    
    .PrincipalMilieu{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .carrousel{
        width: 100%;
        height: 380px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    
    .monimagecarrousel{
        width: 480px;
        height: 310px;
        border-radius: 5px;
        margin: 10px;
    }
    
    .textecarrousel{
        width: 480px;
        height: 35px;
        margin: 0px auto;
        padding-top: 5px;
        background-color: orange;
        border-radius: 5px;
        font-weight: bold;
        font-size: 20px;
        color: rgb(191, 7, 247);
    }
    
    .textecarrousel p{
        margin: auto;
    }
    
    .actualite{
        width: 100%;
        height: 190px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.1);
        background-color: white;
        text-align: center;
    }

    .actualite h3{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: red;
    }
    
    .actualite a{
        font-size: 16px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        line-height: 25px;
        padding: 5px;
    }

    .premier{
        color: green;
    }

    .deuxieme{
        color: blue;
    }

    .troisieme{
        color: orange;
    }

    .quatrieme{
        color: brown;
    }

    .cinquieme{
        color: rgb(252, 5, 239);
    }

    .actualite a:hover{
        color: white;
        background-color: green;
    }
    
    .PrincipalDroite{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .agenda{
        width: 100%;
        height: 180px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.1);
        background-color: white;
        text-align: center;
    }

    .agenda h3{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(2, 179, 2);
    }
    
    .citation{
        width: 100%;
        height: 190px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.1);
        background-color: white;
        text-align: center;
    }

    .citation h3{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(32, 72, 250);
    }

    .citation p{
        text-align: justify;
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .divers{
        width: 100%;
        height: 190px;
        border-radius: 5px;
        box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, 0.1);
        background-color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: orange;
        text-align: center;
    }
    
    footer{
        width: 1024px;
        height: 100%;
        bottom: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin: 0px auto;
        background-color: black;
        display: block;
    }

    .infoderoulante{
        height: 100%;
        height: 40px;
        display: flex;
        flex-direction: row;
    }

    .prebande{
        width: 20%;
        background-color: red;
        text-align: center;
        padding-top: 10px;
        color: white;
    }
}

@media screen and (max-width: 1024px) {
    header{
        width: 510px;
        height: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        background-color: rgb(243, 239, 239);
    }
    
    .entete{
        width: 510px;
        height: 205px;
        display: flex;
        flex-direction: column;
    }
    
    .logo{
        width: 510px;
        height: 110px;
        margin: auto;
        text-align: center;
    }
    
    .publicite{
        width: 510px;
        height: 55px;
        margin: auto;
    }

    .mapublicite{
        width: 510px;
        height: 55px;
    }
    
    .armoirie{
        display: none;
    }
    
    .monlogo{
        width: 90px;
        height: 90px;
        margin: 10px;
    }
    
    .menu{
        width: 510px;
        height: 40px;
        margin: auto;
        background-color: grey;
    }
    
    .sous_menu{
        display: none;
    }

    .hamburger{
        display: block;
        color: white;
    }
    
    .sous_menu:hover{
        background-color: white;
        color: red;
    }
    
    .sous_menu:hover ul{
        display: flex;
        flex-direction: column;
        position: absolute;
        background-color: aqua;
    }
    
    main{
        width: 510px;
        margin: 10px auto 10px;
    }
    
    .principal{
        width: 510px;
        height: 590px;
        margin: auto;
        display: flex;
        flex-direction: column;
    }
    
    .PrincipalGauche{
        width: 510px;
        height: 210px;
        background-color: rgb(243, 239, 239);
        display: flex;
        flex-direction: row;
    }
    
    .motiep{
        width: 255px;
        height: 190px;
        border-radius: 10px;
        margin-top: 0px;
        margin-right: 5px;
        margin-bottom: 10px;
        background-color: white;
        text-align: center;
    }
    
    .imageinspecteur{
        width: 90px;
        height: 117px;
        margin: 10px;
        border-radius: 50%;
    }
    
    .monmot{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 17px;
    }
    
    .monmot a:hover{
        background-color: rgb(250, 250, 203);
        color: red;
    }
    
    .association{
        width: 255px;
        height: 190px;
        border-radius: 10px;
        margin-top: 0px;
        margin-left: 5px;
        margin-bottom: 10px;
        background-color: white;
        text-align: center;
    }
    
    .infomugeah h3{
        padding: 0px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(250, 4, 217);
        font-weight: bold;
    }
    
    .infomugeah p{
        text-align: justify;
        margin: 10px;
        font-style: italic;
        font-size: 15px;
    }
    
    .infomugeah span{
        color: red;
        font-weight: bold;
    }
    
    .lienutile{
        display: none;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    .PrincipalMilieu{
        width: 510px;
        height: 590px;
        margin: 0px auto 0px;
        background-color: rgb(243, 239, 239);
        display: grid;
        grid-template-columns: 1;
        grid-template-rows: repeat(3, 1fr);
    }
    
    .carrousel{
        width: 510px;
        height: 380px;
        display: flex;
        flex-direction: column;
        background-color: white;
        border-radius: 10px;
        text-align: center;
        margin: 0px 0px 0px;
    }
    
    .monimagecarrousel{
        width: 490px;
        height: 320px;
        margin: 10px 0px 10px;
        border-radius: 10px;
    }
    
    .textecarrousel{
        width: 490px;
        height: 30px;
        border-radius: 10px;
        margin: 0px 10px 10px;
        background-color: rgb(243, 239, 239);
        font-weight: bold;
        font-size: 20px;
        color: rgb(191, 7, 247);
    }
    
    .textecarrousel p{
        margin: auto;
    }
    
    .actualite{
        width: 510px;
        height: 190px;
        border-radius: 10px;
        background-color: white;
        text-align: center;
        margin: 10px 0px 10px;
    }

    .actualite h3{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: red;
    }

    .actualite a{
        font-size: 16px;
        line-height: 25px;
        padding: 5px;
        font-weight: bold;
    }

    .premier{
        color: green;
    }

    .deuxieme{
        color: blue;
    }

    .troisieme{
        color: orange;
    }

    .quatrieme{
        color: brown;
    }

    .cinquieme{
        color: rgb(252, 5, 239);
    }

    .actualite a:hover{
        color: red;
        background-color: yellow;
    }
    
    .PrincipalDroite{
        width: 510px;
        height: 210px;
        background-color: rgb(243, 239, 239);
        display: flex;
        flex-direction: row;
    }
    
    .agenda{
        width: 250px;
        height: 190px;
        margin-right: 5px;
        background-color: white;
        border-radius: 10px;
        text-align: center;
    }

    .agenda h3{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(2, 179, 2);
    }

    .agenda p{
        text-align: justify;
        margin-left: 10px;
        margin-right: 10px;
    }

    .citation{
        width: 250px;
        height: 190px;
        margin-left: 5px;
        background-color: white;
        border-radius: 10px;
        text-align: center;
    }

    .citation h3{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(32, 72, 250);
    }

    .citation p{
        text-align: justify;
        margin-left: 15px;
        margin-right: 15px;
    }
    
    .divers{
        display: none;
    }
    
    footer{
        display: none;
    }
}